<script setup lang="ts">
import { reactive, ref, computed, Ref, onMounted } from 'vue'

// #region Swiper 模块使用
import { Swiper, SwiperSlide } from 'swiper/vue';
// import { default as SwiperClass } from 'swiper/types/swiper-class';
// import Swiper core and required modules
import { A11y } from 'swiper';
// Import Swiper styles
import 'swiper/css';

/**
 * Swiper 实例
 */
const mySwiper: Ref<Swiper | null> = ref(null);
/**
 * 选中的 slide
 */
const slideIndex = ref(0);

/**
 * @description: swiper初始化
 * @param {*} swiper
 * @return {*}
 */
const onSwiper = function (swiper: any) {
  mySwiper.value = swiper;
};

/**
 * @description: 列表切换事件
 * @param {*}
 * @return {*}
 */
const onSlideChange = (e: any) => {
  slideIndex.value = e.activeIndex;
};

/**
 * @description: 列表切换
 * @param {*} index
 * @return {*}
 */
function slideSwitch(index: number) {
  slideIndex.value = index;
  if (mySwiper.value)
    mySwiper.value.slideTo(index, 1000, undefined);
}
// #endregion

import MusicBox from '../class/MusicBox';
import IMusicInfo from '../class/IMusicInfo';

/**
 * 列表
 */
const head_list = reactive({
  list: [
    "播放列表",
    "歌曲库"
  ]
});

/**
 * 进度条
 */
const progress = ref(0);

/**
 * 进度条的值
 */
const progressValue = computed(() => {
  let val = `width: ${progress.value}%;`;
  return val;
})

/**
 * 音乐盒
 */
const musicBox = new MusicBox();
// 音乐盒初始化
musicBox.init('https://api.i-meto.com/meting/api?server=netease&type=playlist&id=2878443703')

/**
 * 播放列表
 */
const playList = ref<IMusicInfo[]>([])

/**
 * 音乐信息
 */
const musics = ref(musicBox.musics);

/**
 * 是否处于播放中， true 播放中，false 暂停
 */
const playing = ref(false);

/**
 * 歌曲索引
 */
const playIndex = ref(musicBox.playIndex);

/** 事件注册 */
musicBox.register('onPause', onPause);
musicBox.register('onPlaying', onPlaying);
musicBox.register('onInit', onInit);


/**
 * @description: 暂停事件
 * @param {*} ev
 * @return {*}
 */
function onPause() {
  playing.value = false;
}


/**
 * @description: 初始化事件
 * @param {*} ms
 * @return {*}
 */
function onInit(ms: IMusicInfo[]) {
  if (ms && ms.length > 0)
    playMusicInfo.value = ms[0];
  playIndex.value = 0;
}

//   格式化时间格式
function transTime(time: string) {
  let duration: number = parseInt(time);
  let minute: string | number = parseInt((duration / 60).toString());
  let sec = (duration % 60) + "";
  let isM0 = ":";
  if (minute == 0) {
    minute = "00";
  } else if (minute < 10) {
    minute = "0" + minute;
  }
  if (sec.length == 1) {
    sec = "0" + sec;
  }
  return minute + isM0 + sec;
}

/**
 * 正在播放事件
 */
function onPlaying(val: number) {
  progress.value = val;
}

/**
 * 正在播放的音乐信息
 */
const playMusicInfo = ref({
  pic: "/song_thunder.png",
  author: "X",
  url: "",
  title: "小幸运",
  lrc: "",
})

/**
 * @description: 播放音乐
 * @param {number} index
 * @return {*}
 */
function play(index: number) {
  // 要播的歌曲信息
  playMusicInfo.value = musics.value[index];

  if (playIndex.value == index) {
    if (playing.value) {

      playing.value = !musicBox.pause();
    } else {

      playing.value = musicBox.play(playIndex.value);
    }
  } // 要播的歌当前一样
  else {

    playIndex.value = index;
    playing.value = musicBox.play(playIndex.value);
  }
}

/**
 * @description: 切换播放按钮图片
 * @param {*} index
 * @return {*}
 */
function showPlayOrPauseBtn(index: number): string {
  return `/${index == playIndex.value && playing.value ? 'pause' : 'play'}_btn.png`;
}

/**
 * @description: 添加到播放列表
 * @param {*} index
 * @return {*}
 */
function addToPlayList(index: number) {
  let musicInfo: IMusicInfo = musics.value[index];
  playList.value.push(musicInfo);
}

/**
 * @description: 播放列表是否存在此音乐
 * @param {*} m
 * @return {*}
 */
function existInPlayList(m: IMusicInfo) {
  for (let i = 0; i < playList.value.length; i++) {
    const element = playList.value[i];
    if (element.title == m.title && element.author == m.author) {
      return true;
    }
  }
  return false;
}

/**
 * @description: 切换音乐
 * @param {*} isNext
 * @return {*}
 */
function switchMusic(isNext: boolean) {
  if (isNext) {
    playIndex.value = musicBox.next();
  } else {
    playIndex.value = musicBox.prev();
  }
  playMusicInfo.value = musics.value[playIndex.value];
  playing.value = true;
}


// &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

onMounted(() => {
  if (playList.value.length == 0) {
    mySwiper.value?.slideTo(1, 1000, undefined);
  }
})



</script>

<template>
  <!-- 进度条 -->
  <div class="progress" style="height: 2px;">
    <div class="progress-bar" role="progressbar" :style="progressValue" aria-valuenow="0" aria-valuemin="0"
      aria-valuemax="100"></div>
  </div>

  <figure class="figure">
    <div class="plate" @click.stop="play(playIndex)">
      <!-- 封面 -->
      <img :src="playMusicInfo.pic" :class="{ plate_rotate: playing }" class="img-fluid" alt="..." />
      <!-- 播放按钮 -->
      <div :class="{ play_btn_hidden: playing }" @click.stop="play(playIndex)" class="play_btn">
        <img src="/play_btn.png" class="img-fluid" />
      </div>
    </div>
    <div class="play_switch play_next" @click.stop="switchMusic(true)">&gt;</div>
    <div class="play_switch play_prev" @click.stop="switchMusic(false)">&lt;</div>

    <figcaption class="figure-caption text-center">
      {{ playMusicInfo.title }}
      <span>{{ playMusicInfo.author }}</span>
    </figcaption>
  </figure>

  <!-- 功能列表 -->
  <ul class="nav nav-tabs nav-pills nav-fill">
    <li class="nav-item" v-for="(item, index) in head_list.list" :key="index">
      <a class="nav-link" :class="{ active: index == slideIndex }" aria-current="page" @click="slideSwitch(index)">{{
        item }}</a>
    </li>
  </ul>

  <!-- 歌曲列表 -->
  <div class="song_list">
    <swiper :slides-per-view="1" :space-between="50" :activeIndex="slideIndex" :modules="[A11y]" @swiper="onSwiper"
      @slideChange="onSlideChange">
      <swiper-slide v-slot="{ isActive }">
        <ul>
          <!-- 歌曲信息 -->
          <li v-for="(music, index) in playList" :key="index">
            <span class="song_pic">
              <img :src="music.pic" class="img-fluid" />
            </span>
            <div class="song_info">
              <p>{{ music.title }}</p>
              <p>{{ music.author }}</p>
            </div>
            <div class="song_ctrl">
              <div class="song_ctrl_btn" @click="play(index)">
                <img :src="showPlayOrPauseBtn(index)" class="img-fluid" />
              </div>
            </div>
          </li>
          <!-- end 歌曲信息 -->
        </ul>
      </swiper-slide>
      <swiper-slide>
        <ul>
          <!-- 歌曲信息 -->
          <li v-for="(music, index) in musics" :key="index">
            <span class="song_pic">
              <img :src="music.pic" class="img-fluid" />
            </span>
            <div class="song_info">
              <p>{{ music.title }}</p>
              <p>{{ music.author }}</p>
            </div>
            <div class="song_ctrl">
              <div class="song_ctrl_btn song_add" v-if="!existInPlayList(music)" @click="addToPlayList(index)">
                <img src="/plus_btn.png" class="img-fluid" />
              </div>
              <!-- 播放按钮 -->
              <div class="song_ctrl_btn" @click="play(index)">
                <img :src="showPlayOrPauseBtn(index)" class="img-fluid" />
              </div>
            </div>
          </li>
          <!-- end 歌曲信息 -->
        </ul>
      </swiper-slide>
    </swiper>
    <!-- end swiper -->
  </div>
</template>

<style scoped>
.figure {
  padding-top: 40px;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.nav-item {
  background-color: white;
}

.nav-tabs {
  border-radius: 5px;
  overflow: hidden;
}

.img-fluid {
  width: 100%;
}

/* 磁碟 */
.plate {
  width: var(--song_plate);
  height: var(--song_plate);
  overflow: hidden;
  border: 20px solid rgba(0, 0, 0, 0.705);
  border-radius: 50%;
  margin-bottom: 30px;
  position: relative;
  outline: 1rem solid rgba(0, 0, 0, 0.151);
}

.plate_rotate {
  animation-name: rotate;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 播放按钮 */
.play_btn {
  width: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.play_btn_hidden {
  visibility: hidden;
}

/* end 磁碟 */

/* 信息 */

.figure-caption {
  color: black;
  font-size: 1.1rem;
}

.figure-caption span {
  font-size: 1rem;
  color: #686868;
}

.play_switch {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  color: white;
  font-size: 3rem;
}

.play_next {
  right: 15px;
}

.play_prev {
  left: 15px;
}

/* 歌曲列表 */

.song_list {
  height: 440px;
  /* padding-bottom: 10px; */
  overflow-y: auto;
  background-color: rgb(255, 255, 255);
}

.song_list ul {
  list-style: none;
  text-align: left;
  padding-left: 0;
  background-color: white;
  padding: 5px 0;
  margin-bottom: 0;
}

.song_list li {
  height: 60px;
  display: flex;
  padding: 5px 10px;
  margin-bottom: 5px;
  position: relative;
}

.song_pic {
  overflow: hidden;
  height: 50px;
  width: 50px;
  border-radius: 5px;
  margin-right: 10px;
}

/* 歌曲信息 */
.song_info {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.song_info p {
  margin-bottom: 0;
  height: 50%;
}

.song_info p:first-child {
  font-size: 1rem;
  color: black;
}

.song_info p:last-child {
  color: #999999;
}

/* end 歌曲信息 */

/* 歌曲信息播放 */

.song_ctrl {
  height: 50px;
  right: 10px;
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
}

.song_ctrl_btn {
  height: 38px;
  width: 38px;
}

.song_add {
  transform: scale(1.09);
  margin-right: 10px;
}

/* end 歌曲信息播放 */
</style>
